<template>
	<view class="container">
		<!-- 顶部用户信息 - 加高了背景区域 -->
		<view class="user-section">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="user-detail">
					<text class="nickname">{{ userInfo.nickname || userInfo.username }}</text>
					<view class="user-meta-row">
						<text class="member-badge" :class="getMemberBadgeClass(userInfo.memberType)">{{ userInfo.memberType === 'VIP' ? 'VIP会员' : '普通用户' }}</text>
						<text class="sub-username">@{{ userInfo.username }}</text>
					</view>
				</view>
			</view>
			<view class="sign-in">
				<text style="color: #FBFAFA" @click="DailySign">每日签到</text>
				<uni-icons type="arrowright" size="16" color="#FBFAFA"></uni-icons>
			</view>
		</view>


		<!-- 我的订单 - 增加了订单数量显示 -->
		<view class="order-section">
			<view class="section-header">
				<text class="title">我的订单</text>
				<text class="more" @click="handleOrderClick()">查看全部 ></text>
			</view>
			<view class="order-status">
				<view class="status-item" v-for="item in orderStatus" :key="item.text" @click="handleOrderClick(item)">
					<uni-icons :type="item.icon" size="30" :color="item.color"></uni-icons>
					<text>{{ item.text }}</text>
					<text class="badge" v-if="item.count > 0">{{ item.count }}</text>
				</view>
			</view>
		</view>

		<view class="feature-section">
			<view class="section-header">
				<text class="title">常用功能</text>
			</view>
			<view class="feature-grid">
				<view class="feature-item" v-for="item in features" :key="item.text" @click="handleFeatureClick(item)">
					<uni-icons :type="item.icon" size="35" :color="item.color"></uni-icons>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>

		<!-- 底部TabBar占位 - 增加了高度 -->
		<view class="tabbar-placeholder"></view>
	</view>
</template>

<script>
import { get } from "@/utils/request"; // 导入封装好的 GET 方法

export default {
	data() {
		return {
			userInfo: {
				username: "现在缺点灵感",
				avatar: "/static/my/西红柿.jpg",
				nickname: "",
				memberType: "普通"
			},
			orderStatus: [
				{ icon: "wallet", text: "待付款", color: "#666666", count: 2 },
				{ icon: "paperplane", text: "待发货", color: "#666666", count: 1 },
				{ icon: "cart", text: "待收货", color: "#666666", count: 3 },
				{ icon: "chat", text: "待评价", color: "#666666", count: 0 },
				{ icon: "help", text: "售后服务", color: "#666666", count: 1 }
			],
			features: [
				{ icon: "gift", text: "优惠券", color: "#FFA38A", path: '/pages/mySxz/conpun/conpun' },
				{ icon: "star", text: "我的收藏", color: "#FF9476", path: '/pages/kzMyFavorites/kzMyFavorites' },
				{ icon: "medal", text: "积分中心", color: "#F9BE68", path: '/pages/kzPointsCenter/kzPointsCenter' },
				{ icon: "locked", text: "账户中心", color: "#F8B552", path: '/pages/mySxz/accountSecurity/accountSecurity' },
				{ icon: "location", text: "收货地址", color: "#7DABE9", path: '/pages/kzMyShippingAddress/kzMyShippingAddress' },
				{ icon: "headphones", text: "在线客服", color: "#7DABE9", path: '/pages/mySxz/onlineService/onlineService' },
				{ icon: "info", text: "帮助中心", color: "#7DABE9", path: '/pages/mySxz/helpCenter/helpCenter' },
				{ icon: "compose", text: "意见反馈", color: "#7DABE9", path: '/pages/mySxz/feedback/feedback' }
			]
		};
	},
	onLoad() {
		// 从缓存获取 userId
		const userId = uni.getStorageSync("userId");
		if (!userId) {
			console.warn("未找到 userId，请先登录");
			return;
		}

		// 调用接口获取用户信息
		get(`/core/members/${userId}`).then(res => {
			console.log("用户信息接口返回：", res);
			const data = res && (res.data || res);
			if (data) {
				this.userInfo.username = data.username || this.userInfo.username;
				this.userInfo.avatar = data.avatar || this.userInfo.avatar;
				this.userInfo.nickname = data.nickname || this.userInfo.nickname;
				this.userInfo.memberType = data.memberType || this.userInfo.memberType;
			}
		}).catch(err => {
			console.error("获取用户信息失败：", err);
		});
	},
	methods: {
		DailySign() {
			uni.navigateTo({ url: '/pages/kzPointsCenter/kzPointsCenter' });
		},
		handleFeatureClick(item) {
			if (item.path) {
				uni.navigateTo({ url: item.path });
			}
		},
		handleOrderClick(item) {
			if (!item) {
				uni.navigateTo({ url: '/pages/myorders/myorders?tab=all' });
				return;
			}
			const statusMap = {
				'全部': 'all',
				'待付款': 'pendingPayment',
				'待发货': 'pendingShipping',
				'待收货': 'pendingReceipt',
				'待评价': 'pendingReview'
			};
			if (item.text === '售后服务') {
				uni.navigateTo({ url: '/pages/yzmaftersale/yzmaftersale' });
				return;
			}
			const tabValue = statusMap[item.text];
			if (tabValue) {
				uni.navigateTo({ url: `/pages/myorders/myorders?tab=${tabValue}` });
			}
		},
		viewProduct(item) {
			uni.navigateTo({ url:'/pages/product-detail/index' });
		},
		getMemberBadgeClass(type) {
			return type === 'VIP' ? 'badge-vip' : 'badge-normal'
		}
	}
};
</script>


<style lang="scss">
	.container {
		padding-bottom: 120rpx;
		background-color: #f8f8f8;
	}

	.user-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 30rpx 40rpx;
		background-color: #1BBC9B;
		margin-bottom: 20rpx;

		.user-info {
			display: flex;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
			}

			.user-detail {
				display: flex;
				flex-direction: column;
			}

			.nickname {
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10rpx;
			}

			.user-meta-row {
				display: flex;
				align-items: center;
				gap: 16rpx;
			}

			.member-badge {
				font-size: 22rpx;
				padding: 6rpx 14rpx;
				border-radius: 20rpx;
				border: 1rpx solid rgba(255,255,255,0.4);
				color: #fff;
				background-color: rgba(255,255,255,0.15);
			}
			.badge-vip {
				background: linear-gradient(90deg,#ffcf33,#ff9933);
				color: #4a2d00;
				border-color: rgba(255,207,51,0.6);
			}
			.badge-normal {
				background-color: rgba(255,255,255,0.15);
				color: #fff;
			}

			.sub-username {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.85);
			}
		}

		.sign-in {
			display: flex;
			align-items: center;
			color: #FBFAFA;
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 40rpx;
		}
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f1f1f1;

		.title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.more {
			font-size: 26rpx;
			color: #999;
		}
	}

	.order-status {
		display: flex;
		background-color: #fff;
		padding: 30rpx 0;

		.status-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-size: 26rpx;
				margin-top: 15rpx;
			}

			.badge {
				position: absolute;
				top: -10rpx;
				right: 30rpx;
				background-color: #FF5A5F;
				color: white;
				border-radius: 50%;
				width: 36rpx;
				height: 36rpx;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.feature-section {
		margin-top: 30rpx;
		background-color: #fff;
	}

	.feature-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;

		.feature-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;

			text {
				font-size: 26rpx;
				margin-top: 15rpx;
			}
		}
	}

	.tabbar-placeholder {
		height: 140rpx;
	}
</style>